<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible.sync="dialog"
    :title="0 ? '新增' : '编辑'"
  >
    <el-form ref="form2" :model="form"  >
        <el-form-item :label="attr.group" v-for="attr in form.attribute" :key="attr.index">
          <el-tag
            :key="tag.name"
            v-for="tag in attr.item"
            closable
            :disable-transitions="false"
            @close="handleClose(attr.item,tag)">
            {{tag.name}}
          </el-tag>
         <el-input v-model="attr.item.name" clearable style="width: 150px;"/>
            <!-- <el-button v-show="item.attrHidden == true" type="text" style="position: absolute;top:-6px;right:17px;margin-top:1px;border: none;font-size: 14px;font-weight:bold;line-height: 1.8" icon="el-icon-close" @click="handleRemove(index)" /> -->
            <el-button v-show="true" type="text" style="position: relative;right:20px;border: none;font-size: 14px;font-weight:bold;line-height: 1.8" icon="el-icon-check" @click="attrHiddenBool(attr.item,attr.item.name)" />
         <!-- <el-button type="primary" icon="el-icon-plus" circle></el-button> -->
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getAllBrand,relatedAttribute} from '@/api/storeTemplate'
import CRUD, { presenter, header, form, crud } from "@crud/crud";
export default {
    data() {
      return {
        data: [],
        loading: false,
        dialog: false,
        form: {
          id: '',
          attribute:[]
        }
      };
    },
  methods: {
    handleClose(parent,son) {
     console.log(parent,son,"item")
     parent.splice(parent.indexOf(son),1)
        //this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
    cancel() {
      this.resetForm();
    },
    doSubmit() {
      this.loading = false;
      // [{"group":"主体","item":[{"name":"入网型号"},{"name":"品牌"},{"name":"产品名称"}]},{"group":"基本信息","item":[{"name":"机身长度"},{"name":"重量"},{"name":"材质"}]}]
      const attributeArr=this.form.attribute;
      const attrJson=[];
      for(let i=0;i<attributeArr.length;i++){
        // {"group":"主体","item":[{"name":"入网型号"},{"name":"品牌"},{"name":"产品名称"}]}
        const names=attributeArr[i].item;
        const nameArr=[];
        for(let j=0;j<names.length;j++){
          const name='"name":"'+names[j].name+'"';
          nameArr.push("{"+name+"}")
        }
        const json='"group":"'+attributeArr[i].group+'","item":['+nameArr.join(",")+']';
        attrJson.push("{"+json+"}")
      }
      const template={id:this.form.id,attribute:'['+attrJson.join(",")+']'}
      relatedAttribute(template)
        .then((res) => {
          this.resetForm();
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 2500,
          });
          this.loading = false;
          console.log("doSubmit -> this", this);
           this.$parent.crud.toQuery()
          //this.$emit("torefresh");
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    attrHiddenBool(data,value){
      console.log(data,value,"==========")
      data.push({name:value})
      console.log(this.form.attribute,"form.attribute")
      //清空input框的值
    },
    resetForm() {
      this.dialog = false;
      this.$refs["form2"].resetFields();
      this.form = {
        id: '',
          attribute:[]
      };
    }
  }
}
</script>

<style scoped>
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
